<template>
  <div class="btn-wrapper">
    <div v-if="buttonLeft.length" class="left-btn">
      <template v-for="(item, index) in buttonLeft" :key="index">
        <el-button v-if="!item.slotName" class="commonBtn" v-bind="item">{{
          item.name
        }}</el-button>
        <slot v-else class="commonBtn" :name="item.slotName" />
      </template>
    </div>
    <div v-if="buttonRight.length" class="right-btn">
      <template v-for="(item, index) in buttonRight" :key="index">
        <el-button v-if="!item.slotName" class="commonBtn" v-bind="item">{{
          item.name
        }}</el-button>
        <slot v-else class="commonBtn" :name="item.slotName" />
      </template>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, computed, type PropType } from "vue";

interface TabItem {
  label: string;
  name: string;
  slotName: string;
}

// const activeName = computed(() => {
//   return props.defaultLabel || props.tabsData[0].name
// })

const props = defineProps({
  buttonLeft: {
    type: Array as PropType<TabItem[]>,
    default: () => []
  },
  buttonRight: {
    type: Array as PropType<TabItem[]>,
    default: () => []
  }
});
</script>

<style lang="scss" scoped>
.btn-wrapper {
  margin-bottom: 6px;
  width: 100%;
  height: 32px;
}
.commonBtn {
  margin-right: 10px;
  margin-left: 0;
}
.left-btn {
  float: left;
}
.right-btn {
  float: right;
}
</style>
